<template>
  <div class="common-container">
    <div class="header">
      <div class="header_left">
        <el-input v-model="search_val" placeholder="产品名称" clearable @clear="clearProductName" size="small"
          style="width: 220px">
          <el-button slot="append" :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'" @click="searchButton">
          </el-button>
        </el-input>
      </div>
      <div class="header_right">
        <el-button size="small" style="margin-left: 15px" icon="el-icon-plus" @click="onAdd">
          新增
        </el-button>
      </div>
    </div>
    <div class="content">
      <el-table :data="tableData" height="calc(100% - 65px)" class="table" :header-cell-style="headerStyle">
        <el-table-column align="center" label="序号" type="index" width="80" height="30"></el-table-column>
        <el-table-column align="center" prop="productKey" label="产品Key" min-width="135"></el-table-column>
        <el-table-column align="center" prop="name" label="产品名称" min-width="135"></el-table-column>
        <el-table-column align="center" prop="category" label="品类" min-width="135"></el-table-column>
        <!-- <el-table-column
          align="center"
          prop="isOpenLocate"
          label="设备定位"
          min-width="155"
        >
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.isOpenLocate">开启</el-tag>
            <el-tag type="danger" v-else>关闭</el-tag>
          </template>
</el-table-column>
<el-table-column align="center" prop="locateUpdateType" label="定位方式" min-width="155">
  <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.locateUpdateType == 'manual'"
              >手动定位</el-tag
            >
            <el-tag
              type="warning"
              v-else-if="scope.row.locateUpdateType == 'device'"
              >设备上报</el-tag
            >
            <span v-else></span>
          </template>
</el-table-column> -->
        <el-table-column align="center" prop="isOpenLocate" label="产品图片" min-width="155">
          <template slot-scope="scope">
            <el-avatar v-if="scope.row.img && scope.row.img != null" shape="square" :size="40" fit="fill"
              :src="scope.row.img"></el-avatar>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createAt" label="创建时间" min-width="155"></el-table-column>

        <el-table-column align="center" prop="management" label="操作" min-width="140">
          <template slot-scope="scope">
            <!-- <el-tooltip class="item" effect="dark" content="查看" placement="bottom">
              <i @click="viewClick(scope.row)" class="iconfont xiangqing tableBtnIcon"></i>
            </el-tooltip> -->
            <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
              <i @click="editClick(scope.row)" class="iconfont tianxie tableBtnIcon"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="物模型" placement="bottom">
              <i @click="modelClick(scope.row)" class="iconfont wumoxing tableBtnIcon"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
              <i @click="deleteProduct(scope.row)" class="iconfont shanchu tableBtnIcon"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="page" :limit.sync="limit" @pagination="onProductList" class="pagination" />
    </div>
    <manage ref="refManage" :type="type" :editInfo="editInfo"></manage>
    <thingModel ref="refThingmodel" :productInfo="productInfo"></thingModel>
  </div>
</template>

<script>
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { getRoleList, delRole, getRolePermisison } from "@api/api.js";
import { reqProductList, reqDeleteProduct } from "@api/model.js";
import manage from "./components/manage.vue";
import thingModel from "./components/thingModel/index.vue";
import { transTree } from "@/utils/trans-tree";

export default {
  name: "role",
  components: {
    Pagination,
    manage,
    thingModel,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      loadingSearch: false, //查询按钮loading
      search_val: "",
      page: 1,
      limit: 10,
      total: 100,
      tableData: [],
      treeData: [], //树形表单列表
      editRowInfo: "", //修改那行的数据
      defaultCheckedKeys: "", //行中的权限数组id

      type: "add",
      editInfo: {},

      // 物模型
      productInfo: {},
    };
  },
  mounted() {
    this.onProductList();
  },
  methods: {
    // 清空
    clearProductName() {
      this.page = 1;
      this.limit = 10;
      this.onProductList();
    },
    // 点击查询
    async searchButton() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      await this.onProductList();
      this.loadingSearch = false;
    },

    // 查看
    viewClick(row) {
      this.type = "view";
      this.editInfo = JSON.parse(JSON.stringify(row));
      this.$refs.refManage.dialogVisible = true;
    },

    // 物模型
    modelClick(row) {
      this.productInfo = JSON.parse(JSON.stringify(row));
      this.$refs.refThingmodel.modelDialogVisible = true;
    },

    // 点击修改按钮
    async editClick(row) {
      this.type = "edit";
      this.editInfo = JSON.parse(JSON.stringify(row));
      this.$refs.refManage.dialogVisible = true;
    },
    // 删除角色
    async deleteProduct(row) {
      const result = await this.$confirm(
        "此操作将永久删除该产品, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => { });
      if (result !== "confirm") return;
      let res = await reqDeleteProduct({
        // requestId: row.id,
        requestId: "",
        data: row.productKey,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("删除产品成功");
      this.page = 1;
      this.onProductList();
    },
    // 获取产品列表
    async onProductList() {
      let res = await reqProductList({
        pageNum: this.page,
        pageSize: this.limit,
        data: {
          name: this.search_val || "", //名称
          productKey: "", //key
        },
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      let { rows, total } = res.data;
      if (rows.length) {
        rows.forEach((item) => {
          // 将时间戳转换为Date对象
          var date = new Date(Number(item.createAt));
          // 获取年、月、日
          var year = date.getFullYear();
          var month = date.getMonth() + 1; // getMonth()返回的月份是从0开始的，所以需要+1
          var day = date.getDate();
          var hour = date.getHours();
          var minute = date.getMinutes();
          var second = date.getSeconds();

          // 将年、月、日转换为两位数的格式
          year = year.toString().padStart(4, "0");
          month = month.toString().padStart(2, "0");
          day = day.toString().padStart(2, "0");
          hour = hour.toString().padStart(2, "0");
          minute = minute.toString().padStart(2, "0");
          second = second.toString().padStart(2, "0");

          // 组合成年月日格式
          item.createAt = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
        });
      }
      this.tableData = rows;
      this.total = total;
    },
    // 新增
    onAdd() {
      this.type = "add";
      this.$refs.refManage.dialogVisible = true;
    },
  },
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");

// ::v-deep .cell {
//   display: flex;
//   align-items: center;
//   justify-content: space-around;
// }

::v-deep .el-button--small {
  background: #7367f0;
  color: #fff;
  border: none;
}
</style>
